<template>
  <el-dialog title="我发起的任务" append-to-body :visible.sync="showAction" width="70%">
    <el-table :data="dataList">
      <el-table-column label="任务归属"  :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.type != 100">{{ scope.row.belong }}</span>
          <span v-else>文件解密申请</span>
        </template>
      </el-table-column>
      <el-table-column label="任务内容" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.type != 100">{{ progressLists[scope.row.processType] }}-待{{ progressTypes[scope.row.type] }}</span>
          <span v-else>文件解密申请-待解密</span>
        </template>
      </el-table-column>
      <el-table-column sortable prop="createTime" label="发出时间" ></el-table-column>
      <el-table-column label="工作流">
        <template slot="header" slot-scope="scope">
          工作流
          <el-popover placement="top-start" title="" width="500px" trigger="hover">
            <div>
              <div class="gray_f">
                <div class="flex_start">
                  <span class="pie deepgray_bg"></span>
                  <span class="step_line deepgray_bg"></span>
                  <span class="pie deepgray_bg"></span>
                  <span class="step_line deepgray_bg"></span>
                  <span class="pie deepgray_bg"></span>
                  <span class="ml10">
                    编制
                    <i class="el-icon-arrow-right"></i>
                    审核
                    <i class="el-icon-arrow-right"></i>
                    批准
                  </span>
                </div>
                <div class="flex_start" style="padding: 10px 0;">
                  <span class="pie deepgray_bg"></span>
                  <span class="step_line deepgray_bg"></span>
                  <span class="pie deepgray_bg"></span>
                  <span class="step_line deepgray_bg"></span>
                  <span class="pie deepgray_bg"></span>
                  <span class="step_line deepgray_bg"></span>
                  <span class="pie deepgray_bg"></span>
                  <span class="ml10">
                    编制
                    <i class="el-icon-arrow-right"></i>
                    审核
                    <i class="el-icon-arrow-right"></i>
                    评审
                    <i class="el-icon-arrow-right"></i>
                    批准
                  </span>
                </div>
              </div>
              <div class="gray_f flex_between">
                <div>
                  <span class="pie deepgray_bg"></span>
                  <span class="ml10">未进行</span>
                </div>
                <div>
                  <span class="pie success_bg ml30"></span>
                  <span class="ml10">已完成</span>
                </div>
                <div>
                  <span class="pie error_bg ml30"></span>
                  <span class="ml10">未通过</span>
                </div>
              </div>
            </div>
            <i slot="reference" class="el-icon-warning warn_f pointer"></i>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <div class="flex_start">
            <div class="flex_start" style="padding: 10px 0;">
              <!-- processStatus 工作流状态：0-待审核，1-待评审，2-待签字，3-待批准，4-审核未通过，5-评审未通过，6-批准未通过，7-已完成 -->
              <span class="pie" :class="{ deepgray_bg: scope.row.isSign < 0 && scope.row.processStatus<0, success_bg: scope.row.processStatus >= 0 }"></span>
              <span class="step_line" :class="{ deepgray_bg: scope.row.processStatus <= 0, success_bg: scope.row.processStatus > 0 }"></span>
              <span class="pie" :class="{ deepgray_bg: scope.row.processStatus <= 1, success_bg: scope.row.processStatus > 1, error_bg: scope.row.processStatus == 4 }"></span>
              <block v-if="scope.row.isOnlineReview == 1">
                <span class="step_line" :class="{ deepgray_bg: scope.row.processStatus <= 2, success_bg: scope.row.processStatus > 2 }"></span>
                <span class="pie" :class="{ deepgray_bg: scope.row.processStatus <= 2, success_bg: scope.row.processStatus > 2 }"></span>
              </block>
              <span class="step_line" :class="{ deepgray_bg: scope.row.processStatus <=4, success_bg: scope.row.processStatus > 4 }"></span>
              <span class="pie" :class="{ deepgray_bg: scope.row.processStatus <= 4, success_bg: scope.row.processStatus == 7, error_bg: scope.row.processStatus == 6 }"></span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <!-- <span class="warn_f" v-if="scope.row.processStatus == 8">待编制人员签名</span> -->
          <!-- <span class="warn_f" v-if="scope.row.isSign == -1 && scope.row.processStatus == 0"> 待签名</span> -->
          <span class="warn_f" v-if="scope.row.processStatus == 0">待审核</span>
          <span class="warn_f" v-if="scope.row.processStatus == 1">待评审</span>
          <span class="warn_f" v-if="scope.row.processStatus == 2">评审签名中</span>
          <span class="warn_f" v-if="scope.row.processStatus == 3">批准中</span>
          <span class="error_f" v-if="scope.row.processStatus == 4">审核未通过</span>
          <span class="error_f" v-if="scope.row.processStatus == 5">评审未通过</span>
          <span class="error_f" v-if="scope.row.processStatus == 6">批准未通过</span>
          <span class="success_f" v-if="scope.row.processStatus == 7">已完成</span>
        </template>
      </el-table-column>
     <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
       <el-popover placement="top-start" trigger="hover" v-if="scope.row.type == 0 || scope.row.type == 3">
         <div>前往APP签名</div>
         <span class="main_co pointer" slot="reference">去{{ progressTypes[scope.row.type] }}</span>
       </el-popover>
       <el-popover placement="top-start" trigger="hover" v-else-if="scope.row.type == 100">
         <div>前往APP查看</div>
         <span class="main_co pointer" slot="reference">去查看</span>
       </el-popover>
       <span class="main_co pointer" @click="godoaboutme(scope.row)" v-else>去{{ progressTypes[scope.row.type] }}</span>
       <!--   <el-popover placement="top-start" trigger="hover" v-else-if="scope.row.type == 100">
            <div>前往APP查看</div>
            <span class="main_co pointer" slot="reference">去查看</span>
          </el-popover>
          <span class="main_co pointer" v-else @click="godoaboutme(scope.row)">去查看</span> -->
          <!-- <span class="main_co pointer" @click="godoaboutme(scope.row)">去查看</span> -->
        </template>
      </el-table-column>
      <empty slot="empty" text="暂无发起任务"></empty>
    </el-table>
    <span slot="footer" class="pub_center">
      <!-- <el-card class="pub_right"> -->
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, prev, pager, next, jumper"
      ></el-pagination>
      <!-- </el-card> -->
    </span>
  </el-dialog>
</template>

<script>
import { completedTaskPage } from '@/api/myapi/common';
export default {
  data() {
    return {
      showAction: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      dataList: []
    };
  },
  methods: {
    init() {
      if (this.dataList.length==0) {
        this.completedTaskPage(1, 'star');
      } else {
        this.showAction = true;
      }
    },
    completedTaskPage(pageNo, star) {
      completedTaskPage({
        renwuType: '1',
        current: pageNo,
        size: this.pageSize
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.data.records;
          this.total=data.data.total;
          if (star) this.showAction = true;
        }
      });
    },
    // 当前页
    currentChangeHandle(val) {
    	this.pageNo = val
    	this.completedTaskPage(val)
    },
    godoaboutme(row){
       this.showAction=false;
      this.$emit('onClick',row)
    }
  }
};
</script>

<style scoped>
  .step_line {
    display: inline-block;
    width: 12px;
    height: 2px;
  }
  .pie {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* // margin-right: 4px; */
  }
  .pie.gray {
    background-color: #dce1e6;
  }
</style>
